<template>
  <div class="swiper-wrap">
    <div class="banner-wrap" v-if="images.length >0">
       <el-carousel height="150px">
        <el-carousel-item v-for="(item,index) in images" :key="index">
          <img :src="item.imgUrl" alt="" class="image">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "swiper",
  components: {},
  props: {
    images: {
      type: Array
    }
  },
  data() {
    return {
    };
  },

  methods: {
  },
  mounted() {
  }
};
</script>
<style lang="scss" scoped>
.swiper-wrap {
  width: 365px;
  margin-bottom: 10px;
  .banner-wrap {
    width: 100%;
    padding: 0 0.1rem;
    margin: 0.05rem auto;
    overflow: hidden;
    .image {
      display: block;
      width: 100%;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  }
}

</style>


